import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Mail,
  MapPin,
  Phone,
  Clock,
  Globe,
  MessageSquare,
  Building,
  Calendar,
} from "lucide-react";

export default function ContactPage() {
  return (
    <div className="flex flex-col min-h-screen bg-slate-950">
      {/* Hero Section */}
      <section className="w-full py-12 md:py-24 bg-gradient-to-r from-slate-900 to-indigo-950">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-4 text-center">
            <div className="space-y-2">
              <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none text-white">
                Get in <span className="text-[#50E3C2]">Touch</span>
              </h1>
              <p className="mx-auto max-w-[700px] text-zinc-200 md:text-xl">
                Have questions about our AI agents? Ready to transform your business operations? Connect with our team today.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Contact Form & Info Section */}
      <section className="w-full py-12 md:py-24 bg-slate-950">
        <div className="container px-4 md:px-6">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16">
            {/* Contact Form */}
            <div>
              <Card className="border-slate-800 bg-slate-900/50 backdrop-blur-sm">
                <CardHeader className="pb-6">
                  <CardTitle className="text-white text-2xl">Send us a message</CardTitle>
                  <CardDescription className="text-zinc-400">
                    Fill out the form below and our team will get back to you within 24 hours.
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <form className="space-y-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <Label htmlFor="firstName" className="text-white">First name</Label>
                        <Input
                          id="firstName"
                          placeholder="Enter your first name"
                          className="bg-slate-800 border-slate-700 text-white"
                        />
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="lastName" className="text-white">Last name</Label>
                        <Input
                          id="lastName"
                          placeholder="Enter your last name"
                          className="bg-slate-800 border-slate-700 text-white"
                        />
                      </div>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="email" className="text-white">Email</Label>
                      <Input
                        id="email"
                        type="email"
                        placeholder="your.email@company.com"
                        className="bg-slate-800 border-slate-700 text-white"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="company" className="text-white">Company</Label>
                      <Input
                        id="company"
                        placeholder="Your company name"
                        className="bg-slate-800 border-slate-700 text-white"
                      />
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="interest" className="text-white">I'm interested in</Label>
                      <Select>
                        <SelectTrigger className="bg-slate-800 border-slate-700 text-white">
                          <SelectValue placeholder="Select an option" />
                        </SelectTrigger>
                        <SelectContent className="bg-slate-800 border-slate-700 text-white">
                          <SelectItem value="agent-studio">Agent Studio</SelectItem>
                          <SelectItem value="agent-mesh">Agent Mesh</SelectItem>
                          <SelectItem value="analytics-agent">Analytics Agent</SelectItem>
                          <SelectItem value="enterprise-suite">Enterprise Suite</SelectItem>
                          <SelectItem value="custom-solution">Custom Solution</SelectItem>
                        </SelectContent>
                      </Select>
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="message" className="text-white">Message</Label>
                      <Textarea
                        id="message"
                        placeholder="How can we help you?"
                        className="resize-none min-h-[120px] bg-slate-800 border-slate-700 text-white"
                      />
                    </div>
                    <Button type="submit" className="w-full bg-[#50E3C2] text-slate-900 hover:bg-[#3AC4A5]">
                      Send Message
                    </Button>
                  </form>
                </CardContent>
              </Card>
            </div>

            {/* Contact Info */}
            <div className="space-y-8">
              <div>
                <h2 className="text-2xl font-bold text-white mb-6">Contact Information</h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <Card className="border-slate-800 bg-slate-900/50 backdrop-blur-sm">
                    <CardContent className="p-6 flex items-start space-x-4">
                      <Mail className="h-6 w-6 text-[#50E3C2] mt-1" />
                      <div>
                        <h3 className="font-medium text-white">Email Us</h3>
                        <p className="text-zinc-400 mt-1">info@bgactor.com</p>
                        <p className="text-zinc-400">support@bgactor.com</p>
                      </div>
                    </CardContent>
                  </Card>
                  <Card className="border-slate-800 bg-slate-900/50 backdrop-blur-sm">
                    <CardContent className="p-6 flex items-start space-x-4">
                      <Phone className="h-6 w-6 text-[#50E3C2] mt-1" />
                      <div>
                        <h3 className="font-medium text-white">Call Us</h3>
                        <p className="text-zinc-400 mt-1">+1 (555) 123-4567</p>
                        <p className="text-zinc-400">Mon-Fri 9AM-6PM ET</p>
                      </div>
                    </CardContent>
                  </Card>
                  <Card className="border-slate-800 bg-slate-900/50 backdrop-blur-sm">
                    <CardContent className="p-6 flex items-start space-x-4">
                      <MapPin className="h-6 w-6 text-[#50E3C2] mt-1" />
                      <div>
                        <h3 className="font-medium text-white">Visit Us</h3>
                        <p className="text-zinc-400 mt-1">123 AI Boulevard</p>
                        <p className="text-zinc-400">San Francisco, CA 94107</p>
                      </div>
                    </CardContent>
                  </Card>
                  <Card className="border-slate-800 bg-slate-900/50 backdrop-blur-sm">
                    <CardContent className="p-6 flex items-start space-x-4">
                      <Clock className="h-6 w-6 text-[#50E3C2] mt-1" />
                      <div>
                        <h3 className="font-medium text-white">Office Hours</h3>
                        <p className="text-zinc-400 mt-1">Monday-Friday: 9AM-6PM</p>
                        <p className="text-zinc-400">Weekend: Closed</p>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </div>

              {/* Map */}
              <Card className="border-slate-800 bg-slate-900/50 backdrop-blur-sm overflow-hidden">
                <div className="aspect-video relative bg-slate-800">
                  <div className="absolute inset-0 flex items-center justify-center">
                    <div className="text-center px-6">
                      <MapPin className="h-12 w-12 text-[#50E3C2] mx-auto mb-4 opacity-50" />
                      <p className="text-zinc-400">
                        Map integration will be displayed here. For demo purposes, this is a placeholder.
                      </p>
                    </div>
                  </div>
                </div>
              </Card>

              {/* Additional Contact Options */}
              <div className="space-y-4">
                <h3 className="text-xl font-semibold text-white">Other Ways to Connect</h3>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <Link 
                    href="/demo"
                    className="flex items-center p-4 bg-slate-900/50 border border-slate-800 rounded-lg hover:border-[#50E3C2]/40 transition-colors"
                  >
                    <Calendar className="h-5 w-5 text-[#50E3C2] mr-3" />
                    <span className="text-white">Schedule a Demo</span>
                  </Link>
                  <Link 
                    href="/support"
                    className="flex items-center p-4 bg-slate-900/50 border border-slate-800 rounded-lg hover:border-[#50E3C2]/40 transition-colors"
                  >
                    <MessageSquare className="h-5 w-5 text-[#50E3C2] mr-3" />
                    <span className="text-white">Live Chat Support</span>
                  </Link>
                  <Link 
                    href="/partners"
                    className="flex items-center p-4 bg-slate-900/50 border border-slate-800 rounded-lg hover:border-[#50E3C2]/40 transition-colors"
                  >
                    <Building className="h-5 w-5 text-[#50E3C2] mr-3" />
                    <span className="text-white">Partnership Inquiries</span>
                  </Link>
                  <Link 
                    href="/global"
                    className="flex items-center p-4 bg-slate-900/50 border border-slate-800 rounded-lg hover:border-[#50E3C2]/40 transition-colors"
                  >
                    <Globe className="h-5 w-5 text-[#50E3C2] mr-3" />
                    <span className="text-white">Global Offices</span>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="w-full py-12 md:py-24 bg-gradient-to-t from-slate-950 to-slate-900">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col items-center space-y-4 text-center mb-10">
            <div className="space-y-2">
              <h2 className="text-3xl font-bold text-white">Frequently Asked Questions</h2>
              <p className="mx-auto max-w-[700px] text-zinc-400 md:text-lg">
                Common questions about working with bgactor and our AI agent solutions.
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
            <Card className="border-slate-800 bg-slate-900/50 backdrop-blur-sm">
              <CardHeader>
                <CardTitle className="text-white text-lg">How quickly can you deploy AI agents?</CardTitle>
              </CardHeader>
              <CardContent className="text-zinc-400">
                Deployment timelines vary based on complexity, but our standard implementations typically take 2-4 weeks. Enterprise-wide deployments may take 1-3 months with proper planning and integration.
              </CardContent>
            </Card>
            
            <Card className="border-slate-800 bg-slate-900/50 backdrop-blur-sm">
              <CardHeader>
                <CardTitle className="text-white text-lg">Do you offer custom AI agent development?</CardTitle>
              </CardHeader>
              <CardContent className="text-zinc-400">
                Yes, our team specializes in developing custom AI agents tailored to your specific business challenges and workflows. We work closely with your team to understand requirements and design appropriate solutions.
              </CardContent>
            </Card>

            <Card className="border-slate-800 bg-slate-900/50 backdrop-blur-sm">
              <CardHeader>
                <CardTitle className="text-white text-lg">How do you handle data security?</CardTitle>
              </CardHeader>
              <CardContent className="text-zinc-400">
                We implement enterprise-grade security measures including encryption at rest and in transit, regular security audits, and compliance with major regulations (GDPR, HIPAA, SOC 2). Your data remains your property and is never used to train models without consent.
              </CardContent>
            </Card>

            <Card className="border-slate-800 bg-slate-900/50 backdrop-blur-sm">
              <CardHeader>
                <CardTitle className="text-white text-lg">What kind of support do you provide?</CardTitle>
              </CardHeader>
              <CardContent className="text-zinc-400">
                We offer comprehensive support including implementation assistance, training, 24/7 technical support for critical issues, regular maintenance updates, and a dedicated account manager for enterprise clients.
              </CardContent>
            </Card>
          </div>
        </div>
      </section>
    </div>
  );
} 